import React from 'react';
import { Layout, theme } from 'antd';
// 引入路由routes 数组
import routes from '@/router/routes';
// 引入useRoutes hook
import { useRoutes } from 'react-router-dom'
// 引入suspense 组件, 用来显示loading 效果,必须配合lazy 使用
import { Suspense } from 'react'
// 引入loading组件
import Loading from '@/components/Loading'
const { Content } = Layout;
type Props = {}

export default function Appmain({ }: Props) {
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const element = useRoutes(routes);
    return (
        <Content
            style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
                background: colorBgContainer,
            }}
        >
            {/* 二级路由匹配组件显示在这里 */}
            {/* Suspense当路由匹配的组件还没加载出来之前显示fallback中的组件 */}
            <Suspense fallback={<Loading></Loading>}>
                {element}
            </Suspense>
        </Content>
    )
}